LC-2859 user 마그넷 상세페이지 UI#2151
Hidden character warning
Conversation
github-actions
bot
changed the title
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 Pull Request는 사용자 자료집 상세 페이지의 UI를 구현하고, 관련 컴포넌트들을 재사용 가능하도록 개선하는 데 중점을 둡니다. 새로운 범용 카드 컴포넌트와 좋아요 버튼 컴포넌트를 도입하여 블로그 및 자료집 목록에서 일관된 UI를 제공하며, URL 처리 로직을 개선하여 사용자 경험을 향상시켰습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 자료집 상세 페이지 UI를 구현하고 코드 재사용성을 높이기 위한 중요한 리팩토링을 수행했습니다. 주요 변경 사항으로는 BlogCard와 LibraryCard를 대체하는 범용 ContentCard 컴포넌트와, '좋아요' 기능을 캡슐화한 재사용 가능한 LikeButton 컴포넌트의 생성이 있습니다. 이러한 변경 사항들은 유지보수하기 쉽고 모듈화된 프론트엔드를 만드는 방향과 잘 부합합니다. 제 리뷰에는 Next.js 페이지의 prop 타입 수정, dangerouslySetInnerHTML 사용에 대한 보안 고려사항, 그리고 스타일 가이드에 따라 매직 넘버와 하드코딩된 색상을 상수로 대체하는 등 정확성, 보안, 스타일 가이드 준수를 개선하기 위한 몇 가지 제안이 포함되어 있습니다.
| export async function generateMetadata({ | ||
| params, | ||
| }: { | ||
| params: Promise<{ id: string }>; | ||
| }): Promise<Metadata> { | ||
| const { id } = await params; |
There was a problem hiding this comment.
generateMetadata 함수의 params 타입이 Promise로 잘못 지정되어 있으며, await을 사용하여 값을 가져오고 있습니다. Next.js는 params를 Promise가 아닌, 이미 resolve된 객체로 전달하므로 Promise 래퍼와 await 키워드를 제거해야 합니다.
| export async function generateMetadata({ | |
| params, | |
| }: { | |
| params: Promise<{ id: string }>; | |
| }): Promise<Metadata> { | |
| const { id } = await params; | |
| export async function generateMetadata({ | |
| params, | |
| }: { | |
| params: { id: string }; | |
| }): Promise<Metadata> { | |
| const { id } = params; |
| export default async function LibraryDetailPage({ | ||
| params, | ||
| }: { | ||
| params: Promise<{ id: string; title: string }>; | ||
| }) { | ||
| const { id } = await params; |
There was a problem hiding this comment.
LibraryDetailPage 컴포넌트의 params 타입이 Promise로 잘못 지정되어 있으며, await을 사용하여 값을 가져오고 있습니다. Next.js 페이지 컴포넌트는 params를 Promise가 아닌, 이미 resolve된 객체로 전달하므로 Promise 래퍼와 await 키워드를 제거해야 합니다.
| export default async function LibraryDetailPage({ | |
| params, | |
| }: { | |
| params: Promise<{ id: string; title: string }>; | |
| }) { | |
| const { id } = await params; | |
| export default async function LibraryDetailPage({ | |
| params, | |
| }: { | |
| params: { id: string; title: string }; | |
| }) { | |
| const { id } = params; |
| <div | ||
| className="w-full break-all text-xsmall16" | ||
| dangerouslySetInnerHTML={{ __html: libraryInfo.content }} | ||
| /> |
There was a problem hiding this comment.
dangerouslySetInnerHTML을 사용하여 HTML 콘텐츠를 렌더링하고 있습니다. 현재는 목업 데이터를 사용하고 있어 문제가 없지만, 실제 운영 환경에서 사용자 입력이나 외부 소스로부터 콘텐츠를 받아올 경우 XSS(Cross-Site Scripting) 공격에 취약해질 수 있습니다. 프로덕션 배포 전, 서버 측에서 DOMPurify와 같은 라이브러리를 사용하여 HTML을 안전하게 필터링(sanitizing)하는 로직을 반드시 추가해야 합니다.
| const programRecommendList = await getProgramRecommendList(); | ||
| const recommendLibraries = MOCK_LIBRARY_RECOMMENDS.filter( | ||
| (item) => item.id !== libraryInfo.id, | ||
| ).slice(0, 4); |
There was a problem hiding this comment.
4라는 매직 넘버가 사용되었습니다. 가독성과 유지보수성을 위해 MAX_RECOMMENDED_LIBRARIES와 같이 의미 있는 이름의 상수로 추출하는 것이 좋습니다. 이는 스타일 가이드의 "매직 넘버 이름 붙여주기" 규칙(19-26행)에 해당합니다.
References
- 매직 넘버를 의미 있는 이름의 상수로 대체하여 코드의 명확성을 높이고 유지보수를 용이하게 해야 합니다. (link)
| }; | ||
|
|
||
| if (data.challengeList.length > 0) { | ||
| const targets = data.challengeList.slice(0, 3).map((item) => ({ |
There was a problem hiding this comment.
3이라는 매직 넘버가 사용되었습니다. 가독성과 유지보수성을 위해 MAX_PROGRAM_RECOMMENDS와 같이 의미 있는 이름의 상수로 추출하는 것이 좋습니다. 이는 스타일 가이드의 "매직 넘버 이름 붙여주기" 규칙(19-26행)에 해당합니다.
References
- 매직 넘버를 의미 있는 이름의 상수로 대체하여 코드의 명확성을 높이고 유지보수를 용이하게 해야 합니다. (link)
| </p> | ||
| <CircleChevronRight | ||
| className="h-4 w-4 md:h-5 md:w-5" | ||
| color="#5F66F6" |
There was a problem hiding this comment.
색상 값 #5F66F6이 하드코딩되어 있습니다. 이 색상이 프로젝트의 주요 색상(primary)이라면, 디자인 시스템의 일관성을 위해 Tailwind 설정에 정의된 값을 사용하거나 관리되는 상수를 사용하는 것이 좋습니다. lucide-react 아이콘은 className에 text-primary를 지정하고 color prop을 currentColor로 설정하여 테마 색상을 적용할 수 있습니다.
References
- 상수는 관련된 로직 근처에 정의하거나, 이름만으로도 관계를 명확히 알 수 있도록 해야 합니다. 이는 하드코딩된 값에도 적용될 수 있습니다. (link)
| function MoreLink({ | ||
| href, | ||
| children, | ||
| className, | ||
| }: { | ||
| href: string; | ||
| children?: ReactNode; | ||
| className?: string; | ||
| }) { | ||
| return ( | ||
| <Link | ||
| href={href} | ||
| className={twMerge( | ||
| 'block w-full rounded-xs border border-neutral-80 px-5 py-3 text-center font-medium text-neutral-20', | ||
| className, | ||
| )} | ||
| > | ||
| {children} | ||
| </Link> | ||
| ); | ||
| } |
There was a problem hiding this comment.
MoreLink 컴포넌트는 다른 곳에서도 재사용될 수 있는 범용적인 컴포넌트로 보입니다. src/common/button이나 src/common/link와 같은 공용 디렉토리로 추출하여 관리하면 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이는 스타일 가이드의 "구현 세부 정보 추상화하기" 원칙(38-46행)과도 일맥상통합니다.
References
- 복잡한 로직이나 상호작용을 별도의 컴포넌트로 추상화하여 관심사를 분리하고, 가독성, 테스트 용이성, 유지보수성을 향상시켜야 합니다. (link)
| color="#4D55F5" | ||
| fill={alreadyLike ? '#4D55F5' : 'none'} |
There was a problem hiding this comment.
색상 값 #4D55F5가 하드코딩되어 있습니다. 디자인 시스템의 일관성을 위해 Tailwind 설정이나 별도의 상수 파일에서 관리되는 색상 변수를 사용하는 것을 권장합니다. lucide-react 아이콘은 className에 text-primary와 같은 클래스를 지정하고 color와 fill prop을 currentColor로 설정하여 테마 색상을 적용할 수 있습니다.
References
- 상수는 관련된 로직 근처에 정의하거나, 이름만으로도 관계를 명확히 알 수 있도록 해야 합니다. 이는 하드코딩된 값에도 적용될 수 있습니다. (link)
1 participant
연관 작업